<template>
	<gracePage headerBG="#FFFFFF">
		<view slot="gHeader" style="padding:0 25rpx;">
			<graceNavBar :items="tabs" :currentIndex="currentIndex" @change="navChange"></graceNavBar>
		</view>
		<view slot="gBody" class="grace-flex-v1" id="gBody">
			<swiper :style="{height:mainHeight+'px'}" :current="currentIndex" @change="swiperChange">
				<swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
					<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}" @scrolltolower="scrollend" @scroll="scroll"
					 @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
						<graceReload ref="graceReload" width="700rpx" marginLeft="25rpx" @reload="reload"></graceReload>
						<graceEmpty v-if="news == 'empty'">
							<view slot="img" class="empty-view">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
							</view>
							<text slot="text" class="grace-text-small grace-gray">本栏目暂无作品</text>
						</graceEmpty>
						<view class="content_box" v-if="news != 'empty'">
							<block v-for="(item, index) in news" :key="index" >
								<view class="goods_list" :class="{'last':news.length-1 == index}" @click="$common.routerTo('../components/designerAbout/artDetail')">
									<view class="title">
										<p class="title_name">{{item.title}}</p>
										<p>
											<text>{{item.author}}</text>
											<image :src="item.imgs[0]" mode=""></image>
										</p>
									</view>
									<image :src="item.imgs[0]" class="goods_img"></image>
								</view>
							</block>
						</view>
						<graceLoading :loadingType="loadingTypes[newsIndex]"></graceLoading>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceNavBar from "../../graceUI/components/graceNavBar.vue";
	import graceLoading from "../../graceUI/components/graceLoading.vue";
	import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
	import graceReload from '../../graceUI/components/graceReload.vue';
	export default {
		data() {
			return {
				currentIndex: 0,
				mainHeight: 600,
				//分类数据
				tabsAll: [],
				tabs: [],
				// 新闻信息保存数组
				newsAll: [],
				// 每个选项卡对应的分页
				pages: [],
				// 加载状态
				loadingTypes: [],
				// 每个滚动区域的滚动值
				scrollTops: []
			}
		},
		onReady: function() {
			setTimeout(() => {
				uni.createSelectorQuery().select('#gBody').fields({
					size: true
				}, (res) => {
					this.mainHeight = res.height;
				}).exec();
			}, 1000);
			//加载分类信息 初始化数据
			this.getCate();
		},
		watch: {
			currentIndex: function(nVal, oldVal) {
				if ((this.loadingTypes[this.currentIndex] != 2 || this.loadingTypes[this.currentIndex] != 4) && this.pages[this.currentIndex] <
					2) {
					this.getNews();
				}
			}
		},
		methods: {
			navChange: function(e) {
				this.currentIndex = e;
			},
			swiperChange: function(e) {
				var index = e.detail.current;
				this.currentIndex = index;
			},
			//加载分类信息 初始化数据
			getCate: function() {
				uni.request({
					// 此处可以获取分类 根据分类自己拼接请求地址
					// 格式请参考 接口 [ 浏览器运行直接查看 ]
					url: 'http://grace.hcoder.net/api/tabs',
					method: 'GET',
					data: {},
					success: res => {
						// 初始化新闻列表数组 元素数量与分类匹配
						this.tabsAll = res.data.data;
						for (var i = 0; i < this.tabsAll.length; i++) {
							this.newsAll.push([]);
							this.tabs.push(this.tabsAll[i].txt);
							this.pages.push(1);
							this.loadingTypes.push(3);
							this.scrollTops.push(0);
						}
						this.getNews();
					}
				});
			},
			// 加载新闻
			getNews: function(isReload) {
				// 当前正在展示的 选项index 为 this.currentIndex
				// 那么分类 id 应该为 this.tabsAll[this.currentIndex].id
				//console.log('类型 : ' + this.tabs[this.currentIndex] + ' 第'+ this.pages[this.currentIndex] +'页');
				if (!isReload) {
					this.loadingTypes.splice(this.currentIndex, 1, 1);
				}
				//console.log('http://grace.hcoder.net/api/news/index/'+this.tabsAll[this.currentIndex].id+'/'+this.pages[this.currentIndex]);
				uni.request({
					// 此处可以获取分类 根据分类自己拼接请求地址
					// 分类 id 、页码 都已经获取到了
					url: 'http://grace.hcoder.net/api/news/index/' + this.tabsAll[this.currentIndex].id + '/' + this.pages[this.currentIndex],
					method: 'GET',
					data: {},
					success: res => {
						if (res.data.status == 'ok') {
							// 第一页
							if (this.pages[this.currentIndex] == 1) {
								this.newsAll.splice(this.currentIndex, 1, res.data.data);
							}
							// 之后的加载页
							else {
								this.newsAll[this.currentIndex] = this.newsAll[this.currentIndex].concat(res.data.data);
							}
							// 页码增加
							this.pages[this.currentIndex]++;
							setTimeout(() => {
								this.loadingTypes.splice(this.currentIndex, 1, 3);
							}, 300)
						} else if (res.data.status == 'empty') {
							console.log('empty');
							this.newsAll[this.currentIndex] = 'empty';
							this.loadingTypes.splice(this.currentIndex, 1, 4);
						} else if (res.data.status == 'nomore') {
							console.log('nomore');
							this.loadingTypes.splice(this.currentIndex, 1, 2);
						}
					},
					complete: () => {
						if (isReload) {
							setTimeout(() => {
								this.$refs.graceReload[this.currentIndex].endReload();
							}, 300)
						}
					}
				});
			},
			// 点击新闻列表
			newsinfo: function() {
				uni.showToast({
					title: "请在api接口返回新闻id，利用此函数打开新闻详情页面",
					icon: "none"
				})
			},
			// 加载更多
			scrollend: function(e) {
				// 判断加载状态避免多次滚动时有加载尚未完成
				if (this.loadingTypes[this.currentIndex] == 2 || this.loadingTypes[this.currentIndex] == 4) {
					return false;
				}
				console.log('loadmore.....');
				this.getNews();
			},
			scroll: function(e) {
				this.scrollTops[this.currentIndex] = e.detail.scrollTop;
			},
			touchstart: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchstart(touchObj);
			},
			touchmove: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchmove(touchObj);
			},
			touchend: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchend(touchObj);
			},
			// 下拉刷新
			reload: function() {
				this.pages[this.currentIndex] = 1;
				this.loadingTypes.splice(this.currentIndex, 1, 3);
				this.getNews(1);
			}
		},
		components: {
			gracePage,
			graceNavBar,
			graceEmpty,
			graceLoading,
			graceReload
		}
	}
</script>
<style lang="less" scoped>
	.empty-view {
		width: 280rpx;
		height: 280rpx;
		border-radius: 280rpx;
		background-color: #F6F7F8;
		margin-top: 300rpx;
	}

	.empty-img {
		width: 220rpx;
		height: 200rpx;
		margin: 40rpx;
		border-radius: 200rpx;
	}

	.grace-text-small {
		margin-top: 10px;
	}
	.scroll-view{
		background-color: #f1f1f1;
	}
	.content_box{
		background: #f1f1f1;
		padding: 20upx 20upx 0;
		.goods_list {
			padding: 0 20upx;
			margin-bottom: 20upx;
			// border-radius: 30px;
			background-color: rgba(255, 255, 255, 1);
			&.last{
				margin-bottom: 0;
			}
			.title {
				padding: 0 10upx;
				font-size: 24upx;
				color: rgba(64, 64, 64, 1);
				line-height: 73upx;
				font-weight: 700;
				display: flex;
				justify-content: space-between;
		
				.title_name {
					width: 70%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
		
				&>p:nth-child(2) {
					color: rgba(96, 96, 96, 1);
					font-weight: 500;
					font-size: 20upx;
		
					image {
						width: 42upx;
						height: 42upx;
						vertical-align: middle;
						margin: 0 0 0 10upx;
						border-radius: 50%;
					}
				}
		
		
			}
		
			.goods_img {
				width: 100%;
				height: 288upx;
			}
		}
	}
	
</style>
